<template>
    <div class="section-wrap"
         style="height:100%;">
        <!-- <no-data v-if="acceptList.length==0 && flag"></no-data> -->

        <vue-better-scroll class="wrapper"
                           ref="scrollqq"
                           :scrollbar="scrollbarObj"
                           :pullDownRefresh="pullDownRefreshObj"
                           :pullUpLoad="pullUpLoadObj"
                           :startY="parseInt(startY)"
                           @pullingUp="onPullingUp">
            <div class="form-section">
                <tab active-color="#2269ff">
                    <tab-item @on-item-click="$router.push('AccidentReport')">
                        <i>事故列表</i>
                    </tab-item>
                    <tab-item selected
                              @on-item-click="$router.push('accidentStatistics')">
                        <i>事故统计</i>
                    </tab-item>
                </tab>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>单位名称</label>
                    </div>
                    <group>
                        <div>
                            <div class="right-select"
                                 @click="selectType">
                                {{formData.deptName?formData.deptName:userdepartname}}
                                <i class="iconfont icon-jinru rightmsg"></i>
                            </div>
                        </div>
                    </group>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>事故类型</label>
                    </div>
                    <group>
                        <div>
                            <popup-picker :data="hiddenmeta.list1"
                                          placeholder="请选择"
                                          :columns="1"
                                          v-model="troubletypedata"></popup-picker>
                        </div>
                    </group>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>开始时间</label>
                    </div>
                    <group>
                        <div>
                            <datetime format="YYYY-MM-DD"
                                      v-model="formData.startTime"
                                      @on-change="changeStartTime"></datetime>
                        </div>
                    </group>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>结束时间</label>
                    </div>
                    <group>
                        <div>
                            <datetime format="YYYY-MM-DD"
                                      v-model="formData.endTime"
                                      @on-change="changeEndTime"></datetime>
                        </div>
                    </group>
                </div>
                <p class="search-btn"
                   @click="getListSearch">查询</p>
                <div class="total-top"></div>
                <div class="total">上报次数: {{listAllCount}} 次</div>
                <div class="basicMsg">
                    <ul class="staticList-content">
                        <li class="staticListLis"
                            v-for="(item,index) in itemList"
                            :key="index">
                            <div class="staticListFlex_l">{{item.DepartName.length>15?item.DepartName.slice(0,15) + '...':item.DepartName}}</div>
                            <div class="right-content">
                                <div class="grayColor">上报{{item.Count}}次</div>
                                <div class="redColor">死亡{{item.DieNumber}}人</div>
                            </div>
                        </li>

                    </ul>
                </div>
                <div></div>
            </div>
        </vue-better-scroll>
        <myMenu></myMenu>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompany"
                     business="GetHdProjectsAndFb"></companyProp>
    </div>
</template>

<script>
import { Tab, TabItem, PopupRadio, Datetime } from 'vux'
import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
import { CasualtiesReport } from '@/api/api'
import noData from '@/commonComponents/noData/noData.vue'
import companyProp from '@/commonComponents/companyProp'

export default {
    name: 'App',
    data () {
        return {
            formData: {},
            hiddenmeta: {
                list1: []
            },
            itemList: {},
            // 统计分析列表数据集合
            flag: false,
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            scrollToX: 0,
            scrollToY: 0,
            scrollToTime: 700,
            acceptList: [], // 列表数据
            listCount: 0, // 当前页列表条数
            listAllCount: 0, // 列表总数
            listtrouble: [], // 事故类型列表
            troubletypedata: ['全部'], // 事故类型
            troubletypeCode: '',
            userInfo: {}, // 用户信息
            checkcompany: {},
            userdepartname: '',
            param: {
                allowPaging: false,
                data: {
                    StartDate: '',
                    ProjectID: '',
                    AccidentType: '',
                    EndDate: ''
                },
                pageIndex: 0,
                pageSize: 20
            },
            companyPropShow: false
        }
    },
    components: {
        VueBetterScroll,
        Tab,
        TabItem,
        noData,
        PopupRadio,
        Datetime,
        myMenu,
        companyProp
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.formData.departID = this.userInfo.deptid
        this.userdepartname = this.userInfo.deptname
        this.departsir = this.userInfo.departsir

        if (this.$store.state.checkcompany.sourceType !== 'accidentStatistics') {
            this.$store.state.checkcompany = {}
        }
        if (localStorage.getItem('listSearch')) {
            this.formData = JSON.parse(localStorage.getItem('listSearch'))
            localStorage.removeItem('listSearch')
            this.formData.departID = this.$store.state.checkcompany.deptId
            this.formData.departName = this.$store.state.checkcompany.deptName
        }
        this.formData.startTime = this.getYear() + '-01-01'
        this.formData.endTime = this.getdatenew()
        this.TroubleType()

        this.getListData()
    },
    methods: {
        // 切换开始时间
        changeStartTime (val) {
            if (this.checkTime(val, this.formData.endTime)) {
                this.getListData()
            }
        },
        // 切换结束时间
        changeEndTime (val) {
            if (this.checkTime(this.formData.startTime, val)) {
                this.getListData()
            }
        },
        // 获取事故类型
        TroubleType () {
            var params = {
                allowPaging: true,
                business: 'GetAccidentReportType',
                pageIndex: 0,
                pageSize: 20,
                tokenId: '1ED7B8A3DA7725CC45700551F09CF2AE',
                userId: this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params).then(res => {
                let listArr = []
                let cateList = []
                if (res.data.code == 0) {
                    listArr = res.data.data
                    this.listtrouble = listArr
                }
                listArr.forEach((item, index) => {
                    cateList.push(item.AccidentTypeName)
                })

                this.hiddenmeta.list1 = cateList
            })
        },
        getYear () {
            var date = new Date()
            var year = date.getFullYear()
            return year
        },
        selectType () {
            // this.$router.push({path:"hidechecklook"});
            // localStorage.setItem('listSearch', JSON.stringify(this.formData))
            // this.$router.push({
            //     path: '/addCompany3',
            //     query: { sourceType: 'accidentStatistics' }
            // })
            this.companyPropShow = true
        }, // 获取统计列表
        getListData () {
            let that = this
            this.$vux.loading.show({
                text: '加载中...'
            })
            // 根据事故类型名称查询id
            this.listtrouble.forEach(res => {
                if (res.AccidentTypeName == this.troubletypedata) {
                    this.troubletypeCode = res.AccidentType
                }
            })
            this.param.data.AccidentType = this.troubletypeCode
            this.param.data.EndDate = this.formData.endTime
            // this.param.data.ProjectID = this.$store.state.checkcompany.deptId
            this.param.data.StartDate = this.formData.startTime
            CasualtiesReport(this.param)
                .then(res => {
                    if (res.code == 0) {
                        this.itemList = res.data
                        // 计算上报次数总合
                        this.listAllCount = that.itemList
                            .map(row => row.Count)
                            .reduce((acc, cur) => parseFloat(cur) + acc, 0)
                        this.$vux.loading.hide()
                    } else {
                        this.$vux.toast.text(res.data.info)
                    }
                })
                .catch(() => { })
        },
        // 验证开始和结束时间
        checkTime (startTime, endTime) {
            if (startTime.length > 0 && endTime.length > 0) {
                var startTmp = startTime.split('-')
                var endTmp = endTime.split('-')
                var sd = new Date(startTmp[0], startTmp[1], startTmp[2])
                var ed = new Date(endTmp[0], endTmp[1], endTmp[2])
                if (sd.getTime() > ed.getTime()) {
                    this.$vux.toast.text('开始日期不能大于结束日期')
                    return false
                }
            }
            return true
        },
        getListSearch () {
            this.getListData()
        },
        getdatenew () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()
            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate
            return currentdate
        },
        onPullingDown () {
            console.log('xl')
        },
        onPullingUp () {
            this.param.pageIndex++
            CasualtiesReport(this.param)
                .then(res => {
                    if (res.code === 0) {
                        this.itemList = this.itemList.concat(res.data)
                        this.listCount = this.itemList.length
                        this.listAllCount = res.count
                        if (this.listCount < this.listAllCount) {
                            this.$refs[`scrollqq`].forceUpdate(true)
                        } else {
                            this.$refs[`scrollqq`].forceUpdate(false)
                        }
                    }
                })
                .catch(() => {
                    console.log('error')
                })
                .finally(() => {
                    this.$vux.loading.hide()
                    this.flag = true
                })
        },
        selectCompany (item) {
            this.companyPropShow = false
            this.formData.deptName = item.Name
            this.param.data.ProjectID = item.Id
        }
    }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
.form-section {
    // position: fixed;
    // top: 0px;
    // width: 100%;
    // height: 100%;
    // left: 0;
    // overflow: scroll;
    // bottom: 100px;
    .vux-tab-selected {
        i {
            font-size: 15px;
            color: #2269ff;
            font-weight: bold;
        }
    }
    .search-btn {
        width: 200px;
        line-height: 40px;
        border-radius: 20px;
        margin: 23px auto;
        text-align: center;
        color: #fff;
        background: #2269ff;
    }
    .search-btn:hover {
        opacity: 8;
    }
}
//统计分析列表
.static-sectionBox {
    padding-left: 20px;
    background-color: #fff;
    margin-bottom: 20px;
}
.staticList-head {
    display: flex;
    display: -webkit-flex;
    padding: 10px 0;
    border-bottom: 1px solid #efeff4;
    line-height: 30px;
}
.hidden-totalNum {
    width: 108px;
    border-right: 1px solid #efeff4;
    font-size: 14px;
    font-weight: bold;
}
.staticList-head .hidden-cate {
    padding-left: 14px;
    width: 168px;
    font-weight: normal;
}
.redColor {
    color: #f00;
    font-size: 14px;
}
.grayColor {
    color: #999;
    font-size: 14px;
}
.greenColor {
    color: #15bd84;
}
.hidden-num {
    flex: 1;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    font-size: 14px;
}
.staticListLis {
    display: flex;
    justify-content: space-between;
    line-height: 27px;
    padding: 14px 0;
    border-bottom: 1px solid #efeff4;
    font-size: 14px;
    color: #999;
}
.staticListLis h4 {
    color: #333;
    font-weight: normal;
    font-size: 14px;
}
.baseDanger {
    margin-right: 48px;
}
.majorDanger {
    margin-right: 48px;
}
.dangerGroup div {
    color: #666;
}
.staticList-content .staticListFlex {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding-right: 20px;
    padding-left: 20px;
}

.staticListFlex_l {
    color: #333;
    width: 180px;
    padding-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.right-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
}
.right-select {
    padding-right: 20px;
}
.right-select .icon-jinru {
    position: absolute;
    right: 0;
}
</style>
<style>
.statisticsGroup .vux-no-group-title {
    margin-top: 0;
}
.statisticsGroup .weui-cells:before {
    display: none;
}
.statisticsGroup .weui-label {
    font-size: 14px;
    font-weight: normal;
    color: #333;
}
.statisticsGroup .vux-cell-value,
.statisticsGroup .vux-popup-picker-placeholder {
    font-size: 14px;
    color: #999;
}
.statisticsGroup .weui-cell_access {
    padding: 15px 24px 15px 0;
}
.statisticsGroup .weui-cell_access .weui-cell__ft::after {
    width: 8px;
    height: 8px;
    border-color: #a1a1a1;
}
.statisticsGroup .dateTit p {
    width: 150px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    font-weight: normal;
    color: #333;
}
.statisticsGroup .weui-cells:after {
    display: none;
}
.weui-loading_toast .weui-toast {
    width: 100px;
    min-height: 40px;
    height: 100px;
    top: 280px;
    background: rgba(17, 17, 17, 0.65);
}
.right-select {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    padding-right: 0px;
    height: 20px;
    overflow: hidden;
    width: 180px;
    position: relative;
    line-height: 20px;
    margin-right: -3px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-jinru {
    margin-right: 0px;
    color: #c8c8cd;
}
.total {
    line-height: 45px;
    font-size: 12px;
    color: #2269ff;
    text-align: right;
    padding-right: 20px;
    background: #ffffff;
    border-bottom: 1px solid #ebeef3;
}
.total-top {
    height: 21px;
    background-color: #ebeef3;
}
</style>
